<!--
 * @Description: 任务基础信息
 * @Author: Pengfei Zhang
 * @Date: 2021-09-10 15:11:30
 * @LastEditors: Pengfei Zhang
 * @LastEditTime: 2021-09-15 15:04:48
-->
<template>
  <view class="content-base">
    <uni-forms ref="baseForm" :modelValue="detail" class="form" label-width="90">
      <uni-forms-item label="任务类型" class="task-type">
        <view>{{ getTypeName(detail.type) }}</view>
        <i class="iconfont icon-shuoming"/>
      </uni-forms-item>
      <uni-forms-item label="任务描述">
        {{ detail.desc }}
      </uni-forms-item>
      <uni-forms-item label="负责单位/人">
        {{ detail.response }}
      </uni-forms-item>
      <uni-forms-item label="辅助单位/人">
        {{ detail.assistant }}
      </uni-forms-item>
      <uni-forms-item label="阅读反馈">
        {{ detail.reply }}
      </uni-forms-item>
      <uni-forms-item label="关联事件">
        {{ detail.relatedEvent }}
      </uni-forms-item>
      <uni-forms-item label="开始时间">
        {{ detail.startTime }}
      </uni-forms-item>
      <uni-forms-item label="期望完成">
        {{ detail.expectedTime }}
      </uni-forms-item>
      <!-- 集合任务特有 -->
      <uni-forms-item label="集合类型" v-if="[2,3].includes(detail.type)">
        {{ detail.assembleType}}
      </uni-forms-item>
      <uni-forms-item label="保障点" v-if="![0,4].includes(detail.type)">
        <view class="support-item-wrapper">
          <view>{{ detail.supportSite }}</view>
          <i class="iconfont icon-dingweiweizhi"/>
        </view>
        <view class="support-item-wrapper">
          <view class="people-wrapper">
            <text class="normal--blue-text">{{ detail.supportPersonInCharge }}</text>
            <text class="normal--blue-text">{{detail.supportPhone}}</text>
          </view>
          <i class="iconfont icon-hujiao"/>
        </view>
      </uni-forms-item>
    </uni-forms>
    <!-- 资源调度任务特有 -->
    <view  v-if="detail.type === 1">
      <view class="support-table-wrapper" v-for="(item,index) in detail.supportList" :key="index">
        <view class="support-item-wrapper">
          <view>{{ item.name }}</view>
          <i class="iconfont icon-dingweiweizhi"/>
        </view>
        <view class="support-item-wrapper">
          <view class="people-wrapper">
            <text class="normal--blue-text">{{ item.personInCharge }}</text>
            <text class="normal--blue-text">{{detail.phone}}</text>
          </view>
          <i class="iconfont icon-hujiao"/>
        </view>
        <uni-table stripe emptyText="暂无更多数据" >
          <!-- 表头行 -->
          <uni-tr>
            <uni-th align="left" width="200rpx">物资名称</uni-th>
            <uni-th align="right">调度要求</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="i in item.resourceList" :key="i.name">
            <uni-td align="left">{{ i.name }}</uni-td>
            <uni-td align="right">{{ i.requestNum }}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
    <!-- 统计任务特有 -->
    <view class="count-wrapper" v-if="detail.type === 4">
      <uni-table stripe emptyText="暂无更多数据" >
        <!-- 表头行 -->
        <uni-tr>
          <uni-th align="left" width="200rpx">统计项</uni-th>
          <uni-th align="right">类型</uni-th>
          <uni-th align="right">单位/描述</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="i in detail.countData" :key="i.name">
          <uni-td align="left">{{ i.name }}</uni-td>
          <uni-td align="right">{{ i.type }}</uni-td>
          <uni-td align="right">{{ i.unit }}</uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    taskId: {
      type: String
    }
  },
  data() {
    return {
      detail: {
        type: 1, // 0：普通任务 1:资源调度 2：前往集合 3：组织集合 4：统计任务
        desc: '请立即前往物资库，获取调度列表的物资，再返回现场指挥部',
        response: '胡胜利',
        assistant: '武鸣、肖迪',
        reply: '是',
        relatedEvent: '0512深圳市南山区环城路虾粥村发生洪涝灾害',
        startTime: '2021/12/12 12:12:12',
        expectedTime: '2021/12/12 12:12:12',
        assembleType:'前往集合',
        supportSite:'深圳市南山区环城路虾粥村',
        supportPersonInCharge:'张铭',
        supportPhone:'13900000000',
        supportList:[
          {
            name:'深圳市南山区环城路虾粥村',
            personInCharge:'张铭',
            phone:'13900000000',
            resourceList:[
              {
                name:'物资名称（规格说明）',
                requestNum:'2台',
              },{
                name:'队伍名称',
                requestNum:'4人',
              },{
                name:'专家姓名',
                requestNum:'1人',
              }
            ]
          }
        ],
        countData:[{
          name:'XXX',
          type:'数值',
          unit:'NN',
        },{
          name:'XX情况',
          type:'文本描述',
          unit:'均码',
        }]
      },
    }
  },
  mounted() {

  },
  methods:{
    getTypeName(val){
      let name = {
        0:'普通任务',
        1:'资源调度任务',
        2:'集合任务',
        3:'集合任务',
        4:'统计任务'
      }
      return name[`${val}`]
    }
  }
}
</script>

<style lang="scss" scoped>
.content-base {
  padding: 0 32rpx;
}
.form {
  /deep/ .uni-forms-item__content {
    line-height: 40rpx;
    padding: 16rpx 0;
    font-family: "Source Han Sans CN";
    font-weight: normal;
    font-size: 28rpx;
    line-height: 42rpx;
    text-align: left;
    color: #1d1f24;
  }

  /deep/ .uni-forms-item__label{
    font-family: "Source Han Sans CN";
    font-weight: normal;
    font-size: 28rpx;
    line-height: 48rpx;
    text-align: left;
    color: #555;
    opacity: 0.8;
  }

  .support-item-wrapper:nth-of-type(1){
    margin-bottom:35rpx;
  }

  .support-item-wrapper{
    display: flex;
    justify-content: space-between;

    .people-wrapper{
      .normal--blue-text{
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #027aff;
        margin-right:20rpx;
      }
    }

    .icon-dingweiweizhi{
      color:#FF5151;
    }

    .icon-hujiao{
      color:#027AFF;
    }
  }

  .task-type{

    /deep/.uni-forms-item__content{
      display: flex;
      justify-content: space-between;

      .iconfont{
        color:#027AFF;
      }
    }
  }
}

.support-table-wrapper{
  font-family: "Source Han Sans CN";
  font-weight: normal;
  font-size: 28rpx;
  line-height: 40rpx;
  text-align: left;
  color: #1d1f24;
  border-top: 1px solid #EFF2F5;
  padding-top:28rpx;

  .support-item-wrapper{
    display: flex;
    justify-content: space-between;
    margin-bottom:35rpx;

    .people-wrapper{
      .normal--blue-text{
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #027aff;
        margin-right:20rpx;
      }
    }

    .icon-dingweiweizhi{
      color:#FF5151;
    }

    .icon-hujiao{
      color:#027AFF;
    }
  }
}

.count-wrapper{
  
}
</style>
